웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
안녕하세요 ~ 예전에는 단문의(매우 매우 짧은...) 글을 자주 올렸는데 컨텐츠도 부족한데 글까지 부족하면 왠지 안될 것 같아서... 아무래도 인사부터 시작하면 좀 더 심의를 기울여 작성하지 않을까요?ㅎ 오늘은 비밀번호 입력을 위한 input 태그에 대해 알아보겠습니다.
; type 속성에 일반적으로 text를 넣지만 비밀번호는 password를 넣어줍니다. 그렇게 되면 아래처럼 패스워드가 ******표시로 보이게 되죠....
<input type="text" value="test"> // input창에 test가 출력
<input type="password" value="test"> // input창에 ***가 출력
... 헐 끝까지 다 적었는데 다 날라갔네요... 오토 마우스 옆의 뒤로가기 버튼이 ㅠㅠ 어쨌든, 다시 적습니다;
이처럼 type속성에 password를 사용하는 이유는 혹시 모를 보안상의 문제점을 보완하기 위함입니다. 혹시 뒤에 카메라가 있을지도 모르니까요... 그런데 유면한 포털사이트를 보면 비밀번호 입력폼인데 첨에는 한글 또는 영문으로 보이시죠? 오늘 해볼 것은 바로 이거랍니다.
i. 스크립트를 이용하여 활성화시 type 속성을 변경하기
; 가장 쉽게 떠오르는 방법입니다. 하지만, 실제로 해보면 type속성은 변경할 수 없다며 오류 메시지를 보여주니 패스합니다...
ii. placeholder 속성을 이용하기..
; 사실 이게 제일 편한 방법입니다. input폼에 아래와 같이 이 속성을 넣어주면 끝입니다...
<input type="password" value="" placeholder="패스워드">
// input창에 패스워드가 출력
문제는 이 속성이 IE9 이전버젼에서 지원이 안되는 점입니다... 다른 방법이 필요하겠군요...
iii. 두개의 input 폼을 이용하기
; 제가 현재 사용하는 방법입니다. 말 그대로 우선 두개의 input태그를 준비합니다.
<input class="pass" type="text" id="pstext" value="PASSWORD" />
<input class="passhidden" type="password" id="ps" name="commentps" maxlength="16" value="" />
보시다시피 위의 태그는 보여주기 위함이고 아래 태그는 전송하기 위함입니다. 그래서 아래 태그는 숨겨두고 위에 태그가 활성화 될 때 위에 태그를 숨기고 아래 태그를 보여주면 끝입니다...
단계별로 알아보면...
1. 먼저 두번째 input창은 안보이도록 숨기도록 한다.
<style type="text/css">
.passhidden { display: none; } // 참고로 visibility: none은 공간을 차지하기 때문에 display를 사용하였습니다.
</style>
이제 두번째 창은 숨겨졌습니다.
2. 다음은 스크립트를 이용해 첫번째 창이 활성화되면 숨기고 두번째 input폼이 보이도록 한다.
; 이게 핵심이죠... 스크립트를 이용해야하는데 간단한 jQuery를 사용하겠습니다.
<script type="text/javascript">
$(document).ready(function() {
$("#pstext").on('focus', function() {
$(this).css('display', 'none');
$(this).next().css('display', 'inline-block');
});
});
</script>
이게 전부입니다. 쉽게 쓰려고 노력했는데 쉽지 않군요;; 혹시 궁금하신 사항있으면 댓글을 남겨주세요. 맨 아래 click 이벤트를 안쓴 이유는 input태그는 보통 탭을 눌러서 많이 쓰기 때문에(저를 포함;) focus가 더 적절한 것 같아서 focus로 사용했습니다. 그리고 inline-block을 꼭 사용하실 필요는 없습니다. 상황에 맞게 inline이던 block이던 필요하신데로 쓰시면 될 것 같습니다^^
! 다른 input 태그와의 차이점
; type 속성에 일반적으로 text를 넣지만 비밀번호는 password를 넣어줍니다. 그렇게 되면 아래처럼 패스워드가 ******표시로 보이게 되죠....
<input type="text" value="test"> // input창에 test가 출력
<input type="password" value="test"> // input창에 ***가 출력
... 헐 끝까지 다 적었는데 다 날라갔네요... 오토 마우스 옆의 뒤로가기 버튼이 ㅠㅠ 어쨌든, 다시 적습니다;
이처럼 type속성에 password를 사용하는 이유는 혹시 모를 보안상의 문제점을 보완하기 위함입니다. 혹시 뒤에 카메라가 있을지도 모르니까요... 그런데 유면한 포털사이트를 보면 비밀번호 입력폼인데 첨에는 한글 또는 영문으로 보이시죠? 오늘 해볼 것은 바로 이거랍니다.
* 패스워드폼에 한글 또는 영문으로 역활 알려주기... 어떻게 하면 될까요?
i. 스크립트를 이용하여 활성화시 type 속성을 변경하기
; 가장 쉽게 떠오르는 방법입니다. 하지만, 실제로 해보면 type속성은 변경할 수 없다며 오류 메시지를 보여주니 패스합니다...
ii. placeholder 속성을 이용하기..
; 사실 이게 제일 편한 방법입니다. input폼에 아래와 같이 이 속성을 넣어주면 끝입니다...
<input type="password" value="" placeholder="패스워드">
// input창에 패스워드가 출력
문제는 이 속성이 IE9 이전버젼에서 지원이 안되는 점입니다... 다른 방법이 필요하겠군요...
iii. 두개의 input 폼을 이용하기
; 제가 현재 사용하는 방법입니다. 말 그대로 우선 두개의 input태그를 준비합니다.
<input class="pass" type="text" id="pstext" value="PASSWORD" />
<input class="passhidden" type="password" id="ps" name="commentps" maxlength="16" value="" />
보시다시피 위의 태그는 보여주기 위함이고 아래 태그는 전송하기 위함입니다. 그래서 아래 태그는 숨겨두고 위에 태그가 활성화 될 때 위에 태그를 숨기고 아래 태그를 보여주면 끝입니다...
단계별로 알아보면...
1. 먼저 두번째 input창은 안보이도록 숨기도록 한다.
<style type="text/css">
.passhidden { display: none; } // 참고로 visibility: none은 공간을 차지하기 때문에 display를 사용하였습니다.
</style>
이제 두번째 창은 숨겨졌습니다.
2. 다음은 스크립트를 이용해 첫번째 창이 활성화되면 숨기고 두번째 input폼이 보이도록 한다.
; 이게 핵심이죠... 스크립트를 이용해야하는데 간단한 jQuery를 사용하겠습니다.
<script type="text/javascript">
});
</script>
이게 전부입니다. 쉽게 쓰려고 노력했는데 쉽지 않군요;; 혹시 궁금하신 사항있으면 댓글을 남겨주세요. 맨 아래 click 이벤트를 안쓴 이유는 input태그는 보통 탭을 눌러서 많이 쓰기 때문에(저를 포함;) focus가 더 적절한 것 같아서 focus로 사용했습니다. 그리고 inline-block을 꼭 사용하실 필요는 없습니다. 상황에 맞게 inline이던 block이던 필요하신데로 쓰시면 될 것 같습니다^^
아래의 글도 찾고 계시지 않나요?
